<template>
  <view>
    <view class="head">
      <view class="head_top">
        <view class="head_img">
            <image src="/static/shou.png" alt="">
        </view>
        <view class="head_name">DonaldCastro</view>
        <view class="head_phone">13272632696</view>
      </view>
      <view class="head_site">广东省佛山市XX区XXXX街道XXXX栋</view>
    </view>

    <view class="principal">
        <view class="principal_details">
            <view class="details_profile"></view>
            <view class="SFExpress ">顺丰快递</view>
            <view class="SFExpress_serial">279132710920138265</view>
            <view>复制</view>
        </view>
        <view class="principal_step">
         <u-steps current="4" direction="column" :dot="true">
		   <u-steps-item title="已签收" desc="10:30">
		   </u-steps-item>
		   <u-steps-item title="待取件" desc="10:35">
		   </u-steps-item>
		   <u-steps-item title="派送中" desc="11:40"></u-steps-item>
           <u-steps-item title="运输中" desc="11:40"></u-steps-item>
           <u-steps-item title="已发货" desc="11:40"></u-steps-item>
	      </u-steps>
        </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}
.head {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 698rpx;
  height: 167rpx;

  background-color: #fff;
  margin: 28rpx auto 20rpx auto;
  .head_top {
    display: flex;
    margin-left: 30rpx;
    .head_name {
      font-size: 30rpx;
      margin: 0 20rpx 0 16rpx;
    }
    .head_phone {
      font-size: 28rpx;
    }
    .head_img {
      width: 36rpx;
      height: 36rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .head_site {
    margin-left: 30rpx;
    font-size: 24rpx;
  }
}
.principal {
  width: 698rpx;
  height: 850rpx;
  background-color: #fff;
  overflow: hidden;
  margin: 0 auto;
  .principal_details {
    display: flex;
    height: 50rpx;
    font-size: 24rpx;
    line-height: 50rpx;
    color: #888888;
    margin: 36rpx 0 0 26rpx;
    // background-color: red;
    .details_profile {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      background-color: #d8d8d8;
    }
    .SFExpress {
      font-size: 28rpx;
      font-weight: 700;
      color: #000;
      margin: 0 20rpx 0 15rpx;
    }
    .SFExpress_serial {
      color: #000;
      margin-right: 140rpx;
    }
  }
  .principal_step {
    margin: 56rpx 0 0 45rpx;
  }
}
::v-deep .u-steps-item{
    padding-bottom: 70rpx;
}
::v-deep .u-text__value{
    font-size: 28rpx !important;

    font-weight: 700 !important;
}
</style>